<template>
  <a-modal
    title="规格编辑"
    :visible="visible"
    centered
    :width="800"
    @cancel="closeModel"
    okText="确定"
    @ok="onHandleOk"
  >
    <a-space>售价：</a-space>
    <a-input-number style="width: 94%" :min="0" :step="0.01" v-model="price" />
    <a-table
      ref="table"
      :columns="attrColumns"
      :style="{ marginTop: '5px', maxHeight: '400px', overflowY: 'scroll', minHeight: '0' }"
      bordered
      :dataSource="attr"
      size="small"
      :row-key="(r, i) => JSON.stringify(r)"
      :pagination="false"
    >
      <div slot="numDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
        <a-input-search
          @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
          size="small"
          placeholder="批量设置"
        >
          <a-icon slot="enterButton" type="plus" />
        </a-input-search>
      </div>
      <div slot="priceDropdown" slot-scope="setSelectedKeys, selectedKeys" style="padding: 8px">
        <a-input-search
          @search="(e) => settingAll(e, setSelectedKeys, selectedKeys)"
          size="small"
          placeholder="批量设置"
        >
          <a-icon slot="enterButton" type="plus" />
        </a-input-search>
      </div>
      <span slot="attr_list" slot-scope="attr_list">
        <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
          {{ item.attr_name }}
        </span>
      </span>
      <template slot="num" slot-scope="num, attrItem, attrIndex">
        <a-input-number
          style="display: inherit"
          size="small"
          :autoFocus="autoFocusData.type == 'num' && autoFocusData.index == attrIndex"
          :value="num"
          @change="(e) => handleChange(e, 'num', attrIndex)"
        />
      </template>
      <template slot="price" slot-scope="price, attrItem, attrIndex">
        <a-input-number
          :precision="2"
          style="display: inherit"
          size="small"
          :autoFocus="autoFocusData.type == 'price' && autoFocusData.index == attrIndex"
          :value="price"
          @change="(e) => handleChange(e, 'price', attrIndex)"
        />
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { setAttrNum, setAttr } from '@/api/goods/goods'

const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 200,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 80,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 80,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
]
export default {
  name: 'EditAttrModal',
  components: {},
  props: {
    currentGood: {
      type: Object,
      default: () => {},
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数
      attrColumns,
      attr: [],
      price: '',
    }
  },
  watch: {
    currentGood: {
      deep: true,
      handler(val) {
        console.log('这啥啊啊    ',val)
        if(!val?.id) return;
        this.attr = JSON.parse(val.attr)
        this.price = val.price
      },
    },
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.$refs.table.$el.getElementsByClassName('ant-table-body')[0].style.minHeight = '0px'
        })
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    closeModel() {
      this.$emit('onAfterClose')
    },
    onHandleOk() {
      if (!this.price || this.price == '0.00' || this.price == '0') {
        this.$message.error('请输入商品售价')
        return
      }
      this.$message.loading({ content: '提交中', key: 'loading' })
      const params = {
        id: this.currentGood.id,
        type: 'price',
        value: this.price,
      }
      setAttr(params).then((res) => {
        if (res.code === 0) {
          this.$emit('onHandleOk')
        } else {
          this.$message.error(res.msg)
        }
      })
      setAttrNum({
        attr: this.attr,
        id: this.currentGood.id,
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success({ content: res.msg, key: 'loading' })
          this.$emit('onAfterClose', true)
        } else {
          this.$message.error({ content: res.msg, key: 'loading' })
        }
      })
    },
    /**
     * 修改规格数据
     */
    handleChange(value, type, index) {
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.attr[index][type] = value === null ? '' : value
    },
    settingAll(e, setSelectedKeys, selectedKeys) {
      this.attr.forEach((element, index) => {
        this.attr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.ant-table-body {
  min-height: 0px;
}
</style>
